/**
 * progressions-banners.css
 * 🎨 Styles spécifiques aux bannières du mode Progressions
 * - Bannière des degrés (.degrees-banner)
 * - Gestion des deux bannières en mobile
 * - Disposition et comportement responsive
 */

/* ============================================
   🎼 BANNIÈRE DES DEGRÉS
   ============================================ */

.degrees-banner {
    margin-top: 0.5rem;
}

.degrees-banner .chord-name-content {
    font-size: clamp(1rem, 3vw, 1.2rem);
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* ============================================
   📱 GESTION MOBILE - Deux bannières
   ============================================ */

@media (max-width: 768px) {
    /* Wrapper : alignement des bannières côte à côte */
    .chord-name-wrapper.chord-name-mobile {
        display: flex;
        flex-direction: row; /* ✅ Côte à côte horizontalement */
        align-items: center; /* ✅ Alignées sur le même axe vertical */
        justify-content: center;
        gap: 0.5rem; /* Espacement entre les bannières */
    }
    
    /* Hauteur fixe pour les deux bannières en mobile */
    .chord-name-wrapper.chord-name-mobile .chord-name-banner,
    .chord-name-wrapper.chord-name-mobile .degrees-banner {
        height: 50px;
        min-height: 50px;
        max-height: 50px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1; /* ✅ Largeur égale pour les deux bannières */
    }
    
    /* Ellipsis si le texte dépasse */
    .chord-name-wrapper.chord-name-mobile .chord-name-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        padding: 0 0.5rem;
    }
    
    /* Retirer le margin-top puisque gap gère l'espacement */
    .chord-name-wrapper.chord-name-mobile .degrees-banner {
        margin-top: 0;
    }
}

/* ============================================
   📱 RESPONSIVE - TRÈS PETIT MOBILE
   ============================================ */

@media (max-width: 480px) {
    /* Ajustements pour très petits écrans si nécessaire */
}

/* ============================================
   PRÉFÉRENCE MOUVEMENT RÉDUIT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    /* Pas d'animations sur les bannières pour l'instant */
}

/* ============================================
   PRINT
   ============================================ */

@media print {
    .degrees-banner {
        /* Styles d'impression si nécessaire */
    }
}